<template>
  <div class="page-picker">
    <h1 class="page-title">Picker</h1>

    <div class="page-picker-wrapper" style="background-color: darkgoldenrod;">
      <mt-picker :slots="addressSlots" @change="onAddressChange" :visible-item-count="5"></mt-picker>
    </div>
    <p class="page-picker-desc">地址: {{ tempArea }}</p>

    <!-- defaultIndex 参数变化 -->
    <div class="page-picker-wrapper" style="background-color: darkorange;">
      <mt-picker :slots="numberSlot" @change="onNumberChange" :visible-item-count="3"></mt-picker>
    </div>
    <p class="page-picker-desc">动态默认选项: {{ number }}</p>
  </div>
</template>

<script type="text/babel">
  import Vue from 'vue'
  import {Picker} from 'mint-ui'
  Vue.component(Picker.name, Picker)
  const address = {
    '北京': {'北京':['aa1','bb1','cc1']},
    '广东': {'广州':['aa2','bb2','cc2'],'深圳':['aa3','bb3','cc3']},
    '北京1': {'北京1':['aa1','bb1','cc1']},
    '广东1': {'广州1':['aa2','bb2','cc2'],'深圳1':['aa3','bb3','cc3']}
  };
  export default {
    methods: {
      onYearChange(picker, values) {
        this.year = values[0];
      },

      onNumberChange(picker, values) {
        this.number = values[0];
      },

      onDateChange(picker, values) {
        if (values[0] > values[1]) {
          picker.setSlotValue(1, values[0]);
        }
        this.dateStart = values[0];
        this.dateEnd = values[1];
      },
      //省市区三级联动
      onAddressChange(picker, values) {
        //获取省的信息
        picker.setSlotValues(1, Object.keys(address[values[0]]));
        //获取城市数组
        var citys=address[values[0]];
        picker.setSlotValues(2, citys[values[1]]);
        this.tempArea=values[0]+values[1]+values[2];
      },
//      onAddressChange(picker, values) {
//        picker.setSlotValues(1, address[values[0]]);
//        this.addressProvince = values[0];
//        this.addressCity = values[1];
//      }
    },

    data() {
      return {
        url: '',
        year: '1984',
        number: 0,
        tempArea:"",
        yearSlot: [{
          flex: 1,
          values: ['1984', '1985', '1986', '1987', '1988', '1989', '1990', '1991', '1992', '1993', '1994', '1995'],
          className: 'slot1'
        }],
        numberSlot: [{
          flex: 1,
          defaultIndex: 0,
          values: [0, 1, 2, 3, 4, 5, 6],
          className: 'slot1'
        }],
        dateSlots: [
          {
            flex: 1,
            values: ['2002', '2003', '2004', '2005', '2006', '2007', '2008', '2009', '2010', '2011', '2012', '2013', '2014', '2015', '2016'],
            className: 'slot1',
            textAlign: 'right'
          }, {
            divider: true,
            content: '-',
            className: 'slot2'
          }, {
            flex: 1,
            values: ['2002', '2003', '2004', '2005', '2006', '2007', '2008', '2009', '2010', '2011', '2012', '2013', '2014', '2015', '2016'],
            className: 'slot3',
            textAlign: 'left'
          }
        ],
        dateStart: '2002',
        dateEnd: '2002',
//        addressSlots: [
//          {
//            flex: 1,
//            values: Object.keys(address),
//            className: 'slot1',
//            textAlign: 'center'
//          }, {
//            divider: true,
//            content: '-',
//            className: 'slot2'
//          }, {
//            flex: 1,
//            values: ['北京'],
//            className: 'slot3',
//            textAlign: 'center'
//          }
//        ],
        addressSlots: [//省市区数组
          {
            flex: 1,
            values: Object.keys(address),
            className: 'slot1',
            textAlign: 'left'
          }, {
            divider: true,
            content: '-',
            className: 'slot2'
          }, {
            flex: 1,
            values: ['北京市'],
            className: 'slot3',
            textAlign: 'center'
          }, {
            divider: true,
            content: '-',
            className: 'slot4'
          }, {
            flex: 1,
            values: ['东城区'],
            className: 'slot5',
            textAlign: 'right'
          }
        ]
//        addressProvince: '北京',
//        addressCity: '北京'
      };
    },

    mounted() {
      this.$nextTick(() => {
        let step = 0;
        setInterval(() => {
          this.numberSlot[0].defaultIndex = step++;
          if (step > this.numberSlot[0].values.length - 1) {
            step = 0;
          }
        }, 1000);
      });
    }
  };
</script>
